<#include "../header.ftl">
<link href="${TEMPLATE_PATH}/css/user_base.css" rel="stylesheet" type="text/css" />
<link href="${TEMPLATE_PATH}/css/user_reg.css" rel="stylesheet" type="text/css" />
<script>
function showErrors(id,errors){
	for(var name in errors){
		$.fn.tips({type:"error",content:errors[name]});
		var ele=$("input[name='"+name+"']");
		id.validator('showMsg', ele, {
		    type: "error",
		    msg: errors[name]
		});
	}
}

$(function(){
	
	$(".c_password").blur(function(){
	var value=$(this).val();
	var box=$('#strength');
	if (value==''||value==null){
		box.removeClass().addClass('nothing').text('');
		return false;
	} else if (value.length<6){
		box.removeClass().addClass('nothing').text('密码过短');
	} else {
		var score=passwordGrade(value);
		if (score<11){
			box.removeClass().addClass('nothing').text('不安全');
		} else if (score<21){
			box.removeClass().addClass('strength normal').text('安全程度：低');
		} else if (score<31){
			box.removeClass().addClass('strength general').text('安全程度：中');
		} else if (score>30){
			box.removeClass().addClass('strength special').text('安全程度：高');
		}
	}
	});
	
	$(".form_reg").validator(
	{
		rules: {
           //自定义一个规则，用来代替remote（注意：要把$.ajax()返回出来）
           captchaAjaxRemote: function(element){
	       		return $.ajax({
	                url: '/user/captchaAjax.json',
	                type: 'post',
	                data: element.name +'='+ element.value,
	                dataType: 'json',
	                success: function(data){
						var type="warn";
						if(data.result==true)
						{
							type="ok";
						}else
						{
							showErrors($('.form_reg'),data.errors);
						}
	                },
					error:function(XMLHttpRequest, textStatus, errorThrown){
						$.fn.tips({type:"error",content:XMLHttpRequest.responseText});
					}
	            });
	        },
	        ajaxUserNameRemote: function(element){
		       return $.ajax({
		                url: '/user/ajaxUserName.json',
		                type: 'post',
		                data: element.name +'='+ element.value,
		                dataType: 'json',
		                success: function(data){
							var type="warn";
							if(data.result==true)
							{
								type="ok";
							}else
							{
								showErrors($('.form_reg'),data.errors);
							}
		                },
						error:function(XMLHttpRequest, textStatus, errorThrown){
							$.fn.tips({type:"error",content:XMLHttpRequest.responseText});
						}
		            });
	        	}
	    },
		stopOnError:true,
		theme:'yellow_right_effect',
		ignore:':hidden',
		valid:function(form)
		{
			$.fn.tips({type:'loading',content:'数据提交中'});
			$.ajax(
			{
				url:"/user/reg.json",
				type:"post",
				dataType:"json",
				data:$(form).serialize(),
				success:function(data){
					var type="warn";
					if(data.result==true){type="ok";}
					$.fn.tips({type:type,content:data.msg});
					if(data.result==true)
					{
						setTimeout(function(){location.href="/user/login.htm"},2500);
					}else{
						showErrors($('.form_reg'),data.errors);
					}
				},
				error:function(XMLHttpRequest, textStatus, errorThrown){
					$.fn.tips({type:"error",content:XMLHttpRequest.responseText});
				}
			});
		}
	});
})
</script>

    <div id="position">您所在的位置：<a href="{webroot}">首页</a> > <a href="/user/reg.htm">会员注册</a></div>
    <div class="w980 mt10 mc">
        <div class="w900 bt">
           <div class="title">会员注册</div>
           <div id="userbase">
               <div class="left">
                   <form class="form_reg" method="post">
                   <ul id="reg">
                       <li><em>用户名：</em><input type="text" name="userEntity.userName" class="ip w01" data-rule="用户名:required;username;ajaxUserNameRemote;" maxlength="20" /></li>
                       <li><em>密码：</em><input type="password" name="userEntity.passWord" class="ip w01 c_password" data-rule="密码:required;password;" maxlength="16" /></li>
                       <dd><div id="strength"></div></dd>
                       <li><em>确认密码：</em><input type="password" name="repass" class="ip w01" data-rule="确认密码:required;password;match(password)" maxlength="16" /></li>
                       <li><em>昵称：</em><input type="text" name="nickname" class="ip w01" data-rule="昵称:required;nickname" maxlength="10" /></li>
                       <li><em>电子邮箱：</em><input type="text" name="email" class="ip w01" data-rule="电子邮箱:required;email;" maxlength="50" /></li>
                       <li><em>验证码：</em><input id="imgcode" type="text" name="imgcode" class="ip w02" maxlength="6" data-rule="验证码:required;captchaAjaxRemote;" /> <img src="${basePath}/admin/captcha.htm?t=1" title="看不清楚？点击刷新！" align="absmiddle" id="imgcode" onClick="this.src+='&'+Math.random();" /><span for="imgcode" class="msg-box"></span></li>
                       <dd><a href="#" target="_blank">查看会员注册协议</a></dd>
                       <dd><input type="image" src="${TEMPLATE_PATH}/images/bnt_reg.gif" /></dd>
                   </ul>
                   </form>
               </div>
               <div class="midline"></div>
               <div class="info">
                   <p>已有帐号？</p>
                   <p class="bnt"><a href="/user/login.htm">立即登录</a></p>
               </div>
           </div>
        </div>
    </div>
<#include "../footer.ftl">